<template>
  <div class="index">
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <div class="content">
      <van-skeleton title avatar v-if="!detailObj.content" :row="50" />
      <div class="title">{{ detailObj.title }}</div>
      <div class="itemBottom">
        <span class="time">{{ detailObj.created_at | formatTime }}</span>
        <div class="watch">
          <i class="iconfont icon-icon_liulanliang"></i>
          <span>{{ detailObj.read }}</span>
        </div>
        <div class="zan">
          <i class="iconfont icon-icon_dianzanliang"></i>
          <span>{{ detailObj.star }}</span>
        </div>
      </div>
      <div class="detailContent" v-html="detailObj.content"></div>
    </div>
  </div>
</template>

<script>
import { articlesTechnicDetail } from '@/api/api.js'
export default {
  data () {
    return {
      detailObj: {}
    }
  },
  methods: {
    async getDetail () {
      this.$toast.loading()
      const id = this.$route.params.id
      // console.log(id)
      const res = await articlesTechnicDetail(id)
      console.log(res)
      this.detailObj = res.data
      this.$toast.clear()
    },
    onClickLeft () {
      this.$router.go(-1)
    }
  },
  created () {
    this.getDetail()
  }
}
</script>

<style lang="less" scoped>
.index {
  width: 100%;
  .itemBottom {
    font-size: 12px;
    display: flex;
    color: #ccc;
    margin-top: 16px;
    .time {
      flex: 1;
    }
    .watch {
      margin-right: 24px;
      display: flex;
      align-items: center;
      .icon-icon_liulanliang {
        padding-right: 5px;
      }
    }
    .zan {
      display: flex;
      align-items: center;
      .icon-icon_dianzanliang {
        padding-right: 5px;
      }
    }
  }
  /deep/ .van-nav-bar__arrow {
    font-size: 18px;
    color: #000;
  }
  .content {
    width: 100%;
    padding: 16px;
    .title {
      font-size: 16px;
      font-weight: 700;
    }
    .detailContent {
      width: 100%;
      font-size: 16px;
      margin-top: 20px;
    }
  }
  /deep/ img {
    width: 100%;
  }
}
</style>
